import NavBar from '@/components/Global/NavBar'
import { Button, Form, Input, Toast } from 'antd-mobile'
import { history } from 'umi'
import styles from './index.module.less'
import type { SearchForm } from '../interface'
import { FIELD_RULES } from '@/utils/RegExps'

const CertificateSearch = () => {
    const onSearch = (data: SearchForm) => {
        history.push({
            pathname: '/certificate/result',
            query: { ...data },
            // 传递state不为undefined，让结果页知道是页面来自路由跳转
            state: {},
        })
    }

    const onFinishFailed = () =>
        Toast.show({
            icon: 'fail',
            content: '请完善必填信息',
        })

    return (
        <div className={styles.page}>
            <NavBar title="证书查询" />

            <Form
                onFinish={onSearch}
                onFinishFailed={onFinishFailed}
                validateTrigger="onBlur"
                footer={
                    <Button block type="submit" color="primary">
                        查询
                    </Button>
                }
            >
                <Form.Item
                    name="realname"
                    label="姓名"
                    rules={[{ required: true, message: '请输入姓名' }, FIELD_RULES.NAME]}
                >
                    <Input placeholder="请输入姓名" maxLength={25} clearable />
                </Form.Item>

                <Form.Item
                    name="idcard"
                    label="身份证号"
                    rules={[{ required: true, message: '请输入身份证号' }, FIELD_RULES.ID_CARD]}
                >
                    <Input placeholder="请输入身份证号" maxLength={18} clearable />
                </Form.Item>

                <Form.Item name="certificate" label="证书编号">
                    <Input placeholder="请输入证书编号" maxLength={25} clearable />
                </Form.Item>
            </Form>
        </div>
    )
}

export default CertificateSearch
